.video_items_container {
  display: flex;
  flex-wrap: wrap;

  .items_container {
    background-color: #f6f7f8;
    transition: background 0.22s;
    margin: 15px;
    cursor: pointer;
    border-radius: 10px;

    .item_cover_content {
      position: relative;
      height: 360px;
      overflow: hidden;
      border-radius: 10px;
      -webkit-box-shadow: 0 9px 30px -20px rgba(0, 0, 0, .3);
      box-shadow: 0 9px 30px -20px rgba(0, 0, 0, .3);

      .item_cover {
        -webkit-box-shadow: 0 9px 30px -20px rgba(0, 0, 0, .3);
        box-shadow: 0 9px 30px -20px rgba(0, 0, 0, .3);
        position: absolute;
        left: 50%;
        transform: translateX(-50%);
        height: 100%;
      }
    }

    .item_info {

      .item_name {
        display: flex;
        align-items:center;
        font-size: 16px;
        font-weight: bold;
        margin: 15px 8px;
      }

      .item_describe {
        font-size: 14px;
        margin: 15px 8px;
        color: var(--semi-color-text-2);
      }
    }
  }
}


[theme-mode='dark'] {
  .items_container {
    background-color: rgba(35, 36, 41, 1) !important;
    color: var(--semi-color-text-0);
  }
}

/* 超小屏设备 */
@media (max-width: 575px) {
  .items_container {
    width: 47% !important;
    margin: 5px !important;
  }

  .item_cover_content {
    height: 280px !important;
  }
}

/* 小屏设备 */
@media (min-width: 576px) and (max-width: 767px) {
  .items_container {
    width: 42% !important;
  }
}

/* 平板等中等设备 */
@media (min-width: 768px) and (max-width: 991px) {
  .items_container {
    width: 28% !important;
  }
}

/* 普通PC显示器 */
@media (min-width: 992px) and (max-width: 1199px) {
  .items_container {
    width: 21% !important;
  }
}

/* 宽屏设备 */
@media (min-width: 1200px) and (max-width: 1399px) {
  .items_container {
    width: 21% !important;
  }
}

/* 超宽屏设备 */
@media (min-width: 1400px) {
  .items_container {
    width: 18%;
  }
}


/* 超宽屏设备 */
@media (min-width: 1401px) and (max-width: 1600px) {
  .items_container {
    width: 17% !important;
  }
}

/* 超宽屏设备 */
@media (min-width: 1601px) {
  .items_container {
    width: 14% !important;
  }
}
